<template>
	<div>
		<!--form表单-->
		<el-form size="small" ref="formData" :model="formData" label-width="150px">
			<el-form-item label="商户名称" :rules="[{ required: true, message: '请输入商户名称' }]">
				<el-input v-model.trim="formData.name" placeholder="请输入商户名称" class="max-w460"></el-input>
			</el-form-item>

			<el-form-item label="联系电话" :rules="[{ required: true, message: '请输入联系电话' }]">
				<el-input v-model.trim="formData.link_phone" placeholder="请输入联系电话" class="max-w460"
					v-bind:readonly="true"></el-input>
			</el-form-item>

			<el-form-item label="联系地址" :rules="[{ required: true, message: '请输入联系地址' }]">
				<el-input v-model.trim="formData.address" placeholder="请输入联系地址" class="max-w460"></el-input>
			</el-form-item>

			<el-form-item label="商家介绍" :rules="[{ required: true, message: '请输入商家介绍' }]">
				<el-input type="textarea" v-model.trim="formData.description" placeholder="请输入商家介绍"
					class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="配送方式" :rules="[{ required: true, message: ' ' }]" prop="logistics_type">
				<el-checkbox-group v-model="formData.logistics_type">
					<el-checkbox v-for="(item, index) in logistics_type" :label="item.value"
						:key="index">{{ item.name }}</el-checkbox>
				</el-checkbox-group>
				<div class="tips">注：配送方式至少选择一个，只选择一种配送方式时，会自动修改商户所有商品的配送方式</div>
			</el-form-item>
			<el-form-item label="logo" :rules="[{ required: true, message: '选择Logo' }]">
				<el-button @click="chooseImg('logo')">选择Logo</el-button>
				<el-col>
					<div v-if="formData.logo_id != ''" class="img mt10">
						<img :src="logo_file_path" width="100" height="100" />
					</div>
				</el-col>
				<div class="gray9">建议图片尺寸为150px*150px</div>
			</el-form-item>
			<el-form-item label="背景图" :rules="[{ required: true, message: '选择背景图' }]">
				<el-button @click="chooseImg('back')">选择背景图</el-button>
				<el-col>
					<div v-if="formData.back_image != ''" class="img mt10">
						<img :src="formData.back_image" width="100" height="100" />
					</div>
				</el-col>
			</el-form-item>
			<!--提交-->
			<div class="common-button-wrapper">
				<el-button size="small" type="primary" @click="onSubmit" :disabled="loading">提交</el-button>
			</div>
		</el-form>

		<!--上传图片-->
		<Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc"></Upload>
	</div>
</template>

<script>
	import {
		getSupplier,
		setSupplier
	} from '@/api/setting.js';
	import Upload from '@/components/file/Upload.vue';
	export default {
		components: {
			Upload,
		},
		data() {
			return {
				/*是否在提交*/
				loading: false,
				/*表单数据对象*/
				formData: {
					name: '',
					link_phone: '',
					address: '',
					description: '',
					logo_id: 0,
					back_image: '',
					logistics_type: []
				},
				/*是否打开图片选择*/
				isupload: false,
				/*当前图片类别*/
				type: null,
				logo_file_path: '',
				logistics_type: []
			};
		},
		created() {
			this.getParams();
		},
		methods: {
			/*获取配置数据*/
			getParams() {
				let self = this;
				getSupplier({}, true)
					.then((res) => {
						self.formData = res.data.model;
						self.logo_file_path = res.data.model.logo ? res.data.model.logo.file_path : '';
						self.logistics_type = res.data.logistics_type;
						// 物流方式转换成数组
						for (let i = 0; i < self.formData.logistics_type.length; i++) {
							self.formData.logistics_type[i] = parseInt(self.formData.logistics_type[i]);
						}
					})
					.catch((error) => {});
			},

			/*提交*/
			onSubmit() {
				let self = this;
				let params = this.formData;
				if (params.logistics_type.length < 1) {
					ElMessage({
						message: "配送方式至少选择一种！",
						type: "warning",
					});
					return;
				}
				self.$refs.formData.validate((valid) => {
					if (valid) {
						self.loading = true;
						setSupplier(params, true)
							.then((data) => {
								self.loading = false;
								ElMessage({
									message: '恭喜你，保存设置成功',
									type: 'success',
								});
							})
							.catch((error) => {
								self.loading = false;
							});
					}
				});
			},

			/*选择图片*/
			chooseImg(e) {
				this.type = e;
				this.isupload = true;
			},

			/*关闭选择图片*/
			returnImgsFunc(e) {
				if (e != null && e.length > 0) {
					if (this.type == 'logo') {
						this.logo_file_path = e[0].file_path;
						this.formData.logo_id = e[0].file_id;
					} else if (this.type == 'back') {
						this.formData.back_image = e[0].file_path;
					}
				}
				this.isupload = false;
			},
		},
	};
</script>

<style></style>